<script setup lang="ts">
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import { useChangeLoginBoxStatus } from '@/hooks/useLoginShow'

const userStore = useUserStore()
const { userData } = storeToRefs(userStore)

const $router = useRouter()

defineProps({
  isShowSearch: {
    type: Boolean,
    default: false
  }
})
const goHomeClick = () => {
  $router.push({ path: '/home' })
}
const popLoginBox = () => {
  useChangeLoginBoxStatus()
}

const goUserPage = (pagename: string) => {
  $router.push({
    path: `/user/${pagename}`
  })
}

// 退出登录
const loginOutClick = () => {
  userStore.fetchLoginOutAction()
  $router.push({
    path: '/home'
  })
}
</script>
<template>
  <div class="header box-shadow-v1">
    <div class="container app-container">
      <div class="left" @click="goHomeClick">
        <img src="../../assets/images/logo.png" alt="" />
        <span>尚医通</span>
        <span>预约挂号统一平台</span>
      </div>
      <div class="center">
        <div class="search">
          <search-box v-if="isShowSearch"></search-box>
        </div>
      </div>
      <div class="right">
        <div class="help">帮助中心</div>
        <div class="loginbox" @click="popLoginBox" v-if="!userData.name">
          登录/注册
        </div>
        <div class="userbox" v-else>
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ userData.name }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goUserPage('certification')">
                  <el-icon><Postcard /></el-icon>
                  实名认证
                </el-dropdown-item>
                <el-dropdown-item @click="goUserPage('order')">
                  <el-icon><Tickets /></el-icon>
                  挂号订单
                </el-dropdown-item>
                <el-dropdown-item @click="goUserPage('patient')">
                  <el-icon><User /></el-icon>
                  就诊人信息
                </el-dropdown-item>

                <el-dropdown-item divided @click="loginOutClick">
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.header {
  height: 70px;
  z-index: 1000;
  position: relative;

  .left {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
      width: 50px;
      height: 50px;
      margin-right: 5px;
    }

    span {
      color: var(--primary-color);
      margin-right: 10px;
      font-size: 22px;
      letter-spacing: 1px;
    }
  }

  .center {
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;

    .search {
      width: 250px;
    }
  }

  .right {
    display: flex;
    align-items: center;
    color: var(--text-main-color);

    justify-content: space-between;

    div {
      cursor: pointer;
    }

    div:hover {
      color: var(--text-hover-color);
    }

    .help {
      margin-right: 40px;
    }
    .userbox {
      .el-dropdown-link {
        outline: none;
      }
    }
  }
}
</style>
